<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: fixed;
				right: 10px;
				top:10px;
				background-color: azure;
				border: 1px solid #ccc;
			}
			.box .list{
				width: 200px;
				height: 400px;
				overflow: scroll;
			}
			.box .list .item{
				font-size: 12px;
				overflow:hidden;
				transition: all 1.0s ease-out;
				height: 0px;
				line-height: 0px;
			}
			.box .list .show{
				height: 24px;
				line-height: 24px;
				transition-timing-function: ease-in;
			}
		</style>
	</head>
	<body>
		
		<div class="box" id="box">
			<div class="list" id="list">
				<div class="item" :class="{'show':item.show}" v-for="(item,index) in list">
					{{item.txt}}
				</div>
				<div class="item show">
					啊发顺丰打算发顺丰as阿帆萨达
				</div>
				<div class="item show">
					发放噶说法发生的1242131232
				</div>
				<div class="item show">
					XXXXXXXXXXXXXXXXXXXXXXX
				</div>
				<div class="item show">
					GHFLASJA ___ASFALDKJAS-ASFA
				</div>
			</div>
		</div>
		
		<input type="text" id="txt"/>
		<button onclick="add()">新增</button>
	</body>
</html>
<script>
	var parentElement = document.getElementById('list'); // 获取父元素
	function add(){
		// 假设您有一个父元素和一个新的子元素
		var txt = document.getElementById("txt").value;
		var newChild = document.createElement('div'); // 创建新的子元素
		newChild.innerHTML = txt; // 设置子元素的内容
		newChild.setAttribute("class","item");
		// 检查父元素是否有子元素，如果有，使用insertBefore在第一个子元素前插入新元素
		if (parentElement.firstChild) {
		    parentElement.insertBefore(newChild, parentElement.firstChild);
		} else {
		    parentElement.appendChild(newChild); // 如果没有子元素，直接添加为最后一个子元素
		}
		setTimeout(()=>{
			newChild.setAttribute("class",newChild.getAttribute("class")+" show");
		},1)
	}
</script>
